<template>
<div>
  <div>
    <div><strong>共计：{{initInfo.total}}条</strong>
      <Input type="text" @on-click="selectList(1)" placeholder="请输入姓名" style="width: 164px;margin-right: 15px;margin-left: 15px" v-model="initInfo.name"
             icon="ios-search"/>
      <Input type="text" @on-click="selectList(1)" placeholder="请输入身份证号" style="width: 164px;margin-right: 15px" v-model="initInfo.card_no"
             icon="ios-search"/>
          <Select v-model="initInfo.ju" placeholder="业务部门:" style="width:20%">
            <Option v-for="(item,index) in itemList" :value="item.name" :key="index">{{ item.name }}</Option>
          </Select>
      <Button type="primary" @click="selectList(1)" style="margin-left: 20px">搜索</Button>
    </div>
  </div>
  <div style="margin: 20px 0px">
    <template>
      <Table :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="document_url">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">查看图片要件</Button>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="detail(row)">详情</Button>
          <Button type="primary" size="small" style="margin-right: 5px" @click="updateInfo(row)">修改</Button>
          <Button type="error" size="small" @click="deleteInfo(row)">删除</Button>
        </template>
      </Table>
    </template>
  </div>
  <div style="text-align: right">
    <Page :total="initInfo.total" :page-size="initInfo.pageSize" show-sizer show-total show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
  </div>
  <Modal
    v-model="deleteModal"
    title="删除"
    @on-ok="deleteOk">
    <p>是否删除？</p>
  </Modal>
  <Modal
    v-model="updateModal"
    title="修改"
    @on-ok="updateOk">
    <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
      <Button icon="ios-cloud-upload-outline">上传图片</Button>
      <span style="margin-left: 250px">请上传小于8M的图片</span>
    </Upload>
    <div v-if="this.imgUrl!==''">
      <Carousel v-model="index2" style="width: 500px" dots="outside" trigger="hover">
        <CarouselItem  v-for="(item, index) in imgUrlList" :key="index">
          <img :src="item" width="500px" height="500px"/>
        </CarouselItem>
      </Carousel>
    </div>
  </Modal>
  <Modal
    v-model="UModal"
    title="修改"
    @on-ok="Uok">
    是否修改。一旦修改，之前的沉淀数据将被更新！
  </Modal>
  <Modal
    v-model="modal"
    width="530"
    height="500"
    title="图片要件">
    <Carousel v-model="index1" style="width: 500px" dots="outside" trigger="hover">
      <CarouselItem  v-for="(item, index) in docunmentList" :key="index">
        <img :src="item" width="500px" height="500px"/>
      </CarouselItem>
    </Carousel>
  </Modal>
  <Modal
    v-model="detailModal"
    title="详情">
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">要件编码:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.id"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">姓名:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.name"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">身份证号:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.card_no"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">沉淀订单编号:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.code"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">社区:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.company_code"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">要件名称:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.document"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">要件类型:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.document_type"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">沉淀时间:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.create_time"></Input>
      </Col>
    </Row>
    <Row class="item1" style="height: 60px; line-height:40px">
      <Col span="5" class="ivu-form-item-label">更新时间:</Col>
      <Col span="12" offset="1" class="ivu-form-item-content">
        <Input v-model="detailInfo.update_time"></Input>
      </Col>
    </Row>
  </Modal>
</div>
</template>

<script>
import { findDocumentDepositList, deleteDocument, updateDocument, itemTypeList } from '@/api/eventlist'
import { createUpLoadFiles, getSign } from '@/api/common'

export default {
  name: 'index.vue',
  data () {
    return {
      detailModal: false,
      detailInfo: {},
      columns1: [
        {
          title: '要件编码',
          key: 'id'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '身份证号',
          key: 'card_no'
        },
        // {
        //   title: '沉淀订单编号',
        //   key: 'code'
        // },
        {
          title: '沉淀社区',
          key: 'company_code'
        },
        {
          title: '要件名称',
          key: 'document'
        },
        // {
        //   title: '要件类型',
        //   key: 'document_type'
        // },
        {
          title: '要件地址',
          slot: 'document_url',
          width: 250,
          align: 'center'
        },
        // {
        //   title: '沉淀时间',
        //   key: 'create_time'
        // },
        // {
        //   title: '更新时间',
        //   key: 'update_time'
        // },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      data1: [],
      initInfo: { total: 0, pageNo: 1, pageSize: 10, name: '', card_no: '', ju: '' },
      modal: false,
      deleteModal: false,
      updateModal: false,
      UModal: false,
      docunmentList: [],
      index1: 0,
      index2: 0,
      row: {},
      imgUrl: '',
      imgUrlList: [],
      upPicData: {
        filePath: '',
        fileName: ''
      },
      itemList: []
    }
  },
  mounted () {
    this.init()
    this.itemTypeList()
  },
  methods: {
    itemTypeList () {
      let data = {
        show_state: 'pc%'
      }
      itemTypeList(data).then(ret => {
        this.itemList = ret.data.data
      })
    },
    detail (e) {
      this.detailModal = true
      this.detailInfo = e
    },
    Uok () {
      if (this.imgUrl === '') {
        this.$Notice.error({
          title: '修改失败',
          desc: '图片要件不能为空！'
        })
      } else {
        let data = {
          id: this.row.id,
          document_url: this.imgUrl
        }
        console.log(data)
        updateDocument(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({
              title: '修改成功',
              desc: ret.data.errmsg
            })
            this.imgUrl = ''
            this.imgUrlList = []
            this.init()
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    updateOk () {
      this.UModal = true
    },
    updateInfo (e) {
      this.updateModal = true
      this.row = e
    },
    deleteOk () {
      let data = {
        id: this.row.id
      }
      deleteDocument(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功',
            desc: ret.data.errmsg
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    deleteInfo (e) {
      this.deleteModal = true
      this.row = e
    },
    show (e1, e2) {
      this.modal = true
      this.docunmentList = []
      let url = e2.document_url
      this.docunmentList = url.split(',')
    },
    selectList (e) {
      this.initInfo.pageNo = e
      this.init()
    },
    init () {
      let data = this.initInfo
      findDocumentDepositList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.initInfo.total = ret.data.data.totalRecord
          this.data1 = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    pageChange (page) {
      this.initInfo.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.initInfo.pageSize = e
      this.init()
    },
    beforeUpload (file) {
      this.upPicData.fileName = this.row.document + '.png'
      this.upPicData.filePath = 'itemorder/' + this.row.userid + '/' + this.row.code
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    // 上传图片
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      if (param.fileName.length > 20) {
        param.fileName = param.fileName.substring(0, 20) + '.png'
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: param.filePath, fileName: param.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let Url = res.data.data
              if (this.imgUrl.length === 0) {
                this.imgUrl = Url
              } else {
                this.imgUrl = this.imgUrl + ',' + Url
              }
              this.imgUrlList.push(Url)
              this.index2 = this.imgUrlList.length - 1
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
